<template>
	<div class="page_wrap">
		<!--<div id="myChart"></div>-->

		<div id="earth" style="width: 100%; height: 800px"></div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				value: new Date(),
				myChart: null,
			}
		},
		created() {},
		mounted() {
			this.init();
		},
		beforeRouteLeave(to, from, next) {
			next();
			this.myChart.clear();
			this.myChart.dispose();
		},
		deactivated() {

		},
		methods: {
			init() {
				this.myChart = this.$echarts.init(document.getElementById('earth'));
				let _baseTexture = require("./img/world.jpg");
				let _environment = require("./img/starfield.jpg");
				//let _texture = require("./img/pisa.hdr");
				this.myChart.setOption({
					backgroundColor: "#000",
					globe: {
						baseTexture: _baseTexture,
						heightTexture: _baseTexture,
						displacementScale: 0.04,
						environment: _environment,
						shading: "realistic",
						realisticMaterial: {
							roughness: 0.9
						},
						postEffect: {
							enable: true
						},
						light: {
							main: {
								intensity: 5,
								shadow: true
							},
							ambientCubemap: {
								texture: "",
								diffuseIntensity: 0.2
							}
						}
					}
				}, true);
			},
			init2() {},
			init3() {},
		}
	};
</script>

<style lang="scss" scoped>
	.page_wrap {
		ul {
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			li {
				width: 20%;
				height: 100px;
				background: #fff;
				border-radius: 10px;
				box-shadow: 1px 1px 10px #ccc;
				color: red;
			}
		}
	}
</style>